<template>
  <div class="order-detail" v-if="order.order">
    <card :_Title="i18nText('order.orderDetails', '订单详情')" :_Size="16"></card>
    <Card
      class="mb_10"
      v-if="
        order.allowOperationVO.pay ||
        order.allowOperationVO.rog ||
        order.allowOperationVO.cancel
      "
    >
      <Button
        type="success"
        @click="goPay(order.order.sn)"
        size="small"
        v-if="order.allowOperationVO.pay"
      >{{ i18nText('order.payNow', '去支付') }}
      </Button
      >
      <Button
        type="info"
        @click="received(order.order.sn)"
        size="small"
        v-if="order.allowOperationVO.rog"
      >{{ i18nText('order.confirmReceipt', '确认收货') }}
      </Button>
      <Button
        type="error"
        @click="handleCancelOrder(order.order.sn)"
        v-if="order.allowOperationVO.cancel"
        size="small"
      >{{ i18nText('order.cancelOrder', '取消订单') }}
      </Button>
    </Card>
    <!--    <p class="verificationCode" v-if="order.order.verificationCode">
          核验码：<span>{{ order.order.verificationCode }}</span>
        </p>-->
    <div class="order-card">
      <p class="global_color fontsize_18">{{ order.orderStatusValue }}</p>
      <p>{{ i18nText('order.orderID', '订单号') }}：{{ order.order.sn }}</p>
      <div style="color: #999" class="operation-time">
        {{ i18nText('order.lastEditOrderTime', '操作时间') }}：{{ order.order.updateTime || order.order.createTime }}
      </div>
      <Steps
        class="progress"
        :current="progressList.length"
        direction="vertical"
      >
        <Step
          :title="progress.message"
          :content="progress.createTime"
          v-for="(progress, index) in progressList"
          :key="index"
        ></Step>
      </Steps>
    </div>
    <div class="order-card" v-if="order.order.deliveryMethod == 'LOGISTICS'">
      <h3>{{ i18nText('address.consigneeInformation', '收货人信息') }}</h3>
      <p>{{ i18nText('address.consignee', '收货人') }}：{{ order.order.consigneeName }}</p>
      <p>{{ i18nText('personInfo.phoneNumber', '手机号码') }}：{{ order.order.consigneeMobile | secrecyMobile }}</p>
      <p>
        {{ i18nText('address.shippingAddress', '收货地址') }}：
        {{ order.order.consigneeDetail }} {{ order.order.consigneeAddressPath | unitAddress }}
      </p>
    </div>
    <div class="order-card" v-if="order.order.deliveryMethod == 'SELF_PICK_UP'">
      <h3>自提点信息</h3>
      <p>自提点名称：{{ order.order.storeAddressPath }}</p>
      <p>联系方式：{{ order.order.storeAddressMobile }}</p>
    </div>
    <div class="order-card">
      <h3>{{ i18nText('order.paymentInformation', '付款信息') }}</h3>
      <p>{{ i18nText('order.paymentMethod', '支付方式') }}：{{ order.paymentMethodValue }}</p>
      <p>{{ i18nText('order.paymentStatus', '付款状态') }}：{{ order.payStatusValue }}</p>
    </div>
    <div class="order-card" v-if="!order.order.verificationCode">
      <h3>{{ i18nText('order.shippingInformation', '配送信息') }}</h3>
      <p>{{ i18nText('order.shippingMethod', '配送方式') }}：{{ order.deliveryMethodValue }}</p>
      <p v-if="order.order.deliveryMethod === 'LOGISTICS'">
        {{ i18nText('order.shippingStatus', '配送状态') }}：{{ order.deliverStatusValue }}
      </p>
      <p v-if="logistics">
        {{ i18nText('afterSaleOrder.logisticsInformation', '物流信息') }}：{{ logistics.shipper || "暂无物流信息" }}
      </p>
      <p v-if="logistics">
        {{ i18nText('afterSaleOrder.trackingNumber', '物流单号') }}：{{ logistics.logisticCode || "暂无物流单号" }}
      </p>
      <div class="div-express-log" v-if="logistics">
        <div class="express-log">
          <p>{{ i18nText('order.orderLog', '订单日志') }}：</p>
          <div v-for="(item, index) in logistics.traces" :key="index">
            <span class="time">{{ item.AcceptTime }}</span>
            <span class="detail">{{ item.AcceptStation }}</span>
          </div>
        </div>
      </div>
    </div>
    <!--    <div class="order-card" v-if="order.order.payStatus === 'PAID'">
          <h3>发票信息</h3>
          <template v-if="order.order.needReceipt && order.receipt">
            <p>发票抬头：{{ order.receipt.receiptTitle }}</p>
            <p>发票内容：{{ order.receipt.receiptContent }}</p>
            <p v-if="order.receipt.taxpayerId">
              纳税人识别号：{{ order.receipt.taxpayerId }}
            </p>
          </template>
          <div v-else style="color: #999; margin-left: 5px">未开发票</div>
        </div>-->
    <!-- 订单商品 -->
    <div class="goods">
      <!--      <div class="shop-name">
              <span @click="shopPage(order.order.storeId)">{{
                order.order.storeName
              }}</span>
            </div>-->
      <table>
        <thead>
        <tr>
          <th width="40%">{{ i18nText('product.productName', '商品') }}</th>
          <th width="20%">{{ i18nText('product.productID', '货号') }}</th>
          <th width="10%">{{ i18nText('product.price', '单价') }}</th>
          <th width="5%">{{ i18nText('product.quantity', '数量') }}</th>
          <th width="15%">{{ i18nText('product.settlementPrice', '小计') }}</th>
          <th width="10%">{{ i18nText('common.action', '操作') }}</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(goods, goodsIndex) in order.orderItems" :key="goodsIndex">
          <td>
            <img
              @click="goodsDetail(goods.skuId, goods.goodsId)"
              :src="goods.image"
              alt=""
            />
            <div>
              <p
                @click="goodsDetail(goods.skuId, goods.goodsId)"
                class="hover-color"
              >
                {{ goods.goodsName }}
              </p>
            </div>
          </td>
          <td>{{ goods.id }}</td>
          <td>{{ goods.goodsPrice | unitPrice(i18nText('symbol.currencySymbol', '￥')) }}</td>
          <td>{{ goods.num }}</td>
          <td>{{ (goods.goodsPrice * goods.num) | unitPrice(i18nText('symbol.currencySymbol', '￥')) }}</td>
          <td>
            <Button
              v-if="
                  goods.afterSaleStatus.includes('NOT_APPLIED') ||
                  goods.afterSaleStatus.includes('PART_AFTER_SALE')
                "
              @click="applyAfterSale(goods.sn)"
              type="info"
              size="small"
              class="mb_5"
            >{{ i18nText('order.applyForAfterSalesService', '申请售后') }}
            </Button>
            <Button
              v-if="goods.commentStatus === 'UNFINISHED'"
              @click="comment(order.order.sn, goodsIndex)"
              size="small"
              type="success"
              class="fontsize_12 mb_5"
            >{{ i18nText('review.writeReview', '评价') }}
            </Button>
            <br>
            <Button
              v-if="goods.complainStatus === 'NO_APPLY'"
              @click="complain(order.order.sn, goodsIndex)"
              type="warning"
              class="fontsize_12"
              size="small"
            >{{ i18nText('order.complaint', '投诉') }}
            </Button
            >
          </td>
        </tr>
        </tbody>
      </table>
      <!-- 订单价格 -->
      <div class="order-price">
        <div>
          <span>{{ i18nText('product.quantity', '商品件数') }}：</span>
          <span>
            {{ order.order.goodsNum }}
            {{ order.order.goodsNum === 1 ? i18nText('order.item', '件') : i18nText('order.items', '件') }}
          </span>
        </div>
        <div>
          <span>{{ i18nText('product.totalPrice', '商品总价') }}：</span
          ><span>{{ order.order.goodsPrice | unitPrice(i18nText('symbol.currencySymbol', '￥')) }}</span
        ><br/>
        </div>
        <div>
          <span>{{ i18nText('order.transportationExpenses', '运费') }}：</span
          ><span>+{{ order.order.freightPrice | unitPrice(i18nText('symbol.currencySymbol', '￥')) }}</span
        ><br/>
        </div>
        <div v-if="order.order.priceDetailDTO.couponPrice">
          <span>{{ i18nText('coupon.coupon', '优惠券') }}：</span
          ><span
        >-{{
            order.order.priceDetailDTO.couponPrice || 0 | unitPrice(i18nText('symbol.currencySymbol', '￥'))
          }}</span
        >
        </div>
        <div v-if="order.order.discountPrice">
          <span>{{ i18nText('promotion.promotionalDiscount', '活动优惠') }}：</span
          ><span>-{{ order.order.discountPrice | unitPrice(i18nText('symbol.currencySymbol', '￥')) }}</span>
        </div>
        <div>
          <span>{{ i18nText('product.sumPayable', '应付金额') }}：</span>
          <span class="actrual-price">{{
              order.order.flowPrice | unitPrice(i18nText('symbol.currencySymbol', '￥'))
            }}</span>
        </div>
      </div>
    </div>
    <Modal
      v-model="cancelAvail"
      :title="i18nText('order.selectReasonForCancelingOrder', '请选择取消订单原因')"
      @on-ok="sureCancel"
      @on-cancel="cancelAvail = false"
    >
      <RadioGroup
        v-model="cancelParams.reason"
        vertical
        type="button"
        button-style="solid"
      >
        <Radio :label="item.reason" v-for="item in cancelReason" :key="item.id">
          {{ item.reason }}
        </Radio>
      </RadioGroup>
    </Modal>
  </div>
</template>
<script>
import {
  orderDetail,
  getTraces,
  sureReceived,
  cancelOrder,
} from "@/api/order.js";
import {afterSaleReason} from "@/api/member";

export default {
  name: "order-detail",
  data() {
    return {
      order: {}, // 订单详情数据
      progressList: [], // 订单流程
      logistics: "", // 物流数据
      cancelParams: {
        // 取消售后参数
        orderSn: "",
        reason: "",
      },
      cancelAvail: false, // 取消订单modal控制
      cancelReason: [], // 取消订单原因
    };
  },
  methods: {
    goodsDetail(skuId, goodsId) {
      // 跳转商品详情
      let routeUrl = this.$router.resolve({
        path: "/goodsDetail",
        query: {skuId, goodsId},
      });
      window.open(routeUrl.href, "_blank");
    },
    // 跳转店铺首页
    shopPage(id) {
      let routeUrl = this.$router.resolve({
        path: "/Merchant",
        query: {id: id},
      });
      window.open(routeUrl.href, "_blank");
    },
    getDetail() {
      // 获取订单详情
      orderDetail(this.$route.query.sn).then((res) => {
        if (res.success) {
          this.order = res.result;
          this.progressList = res.result.orderLogs;
          if (this.order.order.deliveryMethod === 'LOGISTICS') {
            this.traces();
          }
        }
      });
    },
    traces() {
      // 物流信息
      getTraces(this.$route.query.sn).then((res) => {
        if (res.success) {
          this.logistics = res.result;
        }
      });
    },
    received(sn) {
      // 确认收货
      sureReceived(sn).then((res) => {
        if (res.success) {
          this.$Message.success(i18nText('order.successfullyConfirmedReceiptOfGoods', '确认收货成功'));
          this.getDetail();
        }
      });
    },
    goPay(sn) {
      // 去支付
      this.$router.push({
        path: "/payment",
        query: {orderType: "ORDER", sn},
      });
    },
    applyAfterSale(sn) {
      // 申请售后
      this.$router.push({name: "ApplyAfterSale", query: {sn: sn}});
    },
    comment(sn, goodsIndex) {
      // 评价
      this.$router.push({
        path: "/home/addEval",
        query: {sn, index: goodsIndex},
      });
    },
    complain(sn, goodsIndex) {
      // 投诉
      this.$router.push({name: "Complain", query: {sn, index: goodsIndex}});
    },
    handleCancelOrder(sn) {
      // 取消订单
      this.cancelParams.orderSn = sn;
      afterSaleReason("CANCEL").then((res) => {
        if (res.success) {
          this.cancelReason = res.result;
          this.cancelAvail = true;
          this.cancelParams.reason = this.cancelReason[0].reason;
        }
      });
    },
    sureCancel() {
      // 确定取消
      cancelOrder(this.cancelParams).then((res) => {
        if (res.success) {
          this.$Message.success(i18nText('order.successfullyCanceledAnOrder', '取消订单成功'));
          this.getDetail();
          this.cancelAvail = false;
        }
      });
    },
  },
  mounted() {
    this.getDetail();
  },
};
</script>
<style lang="scss" scoped>
.mb_10 {
  Button:nth-of-type(2) {
    margin-left: 10px;
  }
}

.mb_5 {
  margin-bottom: 5px;
}

.order-card {
  padding: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #e8eaec;
  position: relative;

  .global_color {
    color: $theme_color;
  }

  p {
    color: #999;
    margin: 3px;
    margin-left: 5px;
  }

  h3 {
    font-weight: normal;
    font-size: 16px;
  }

  .operation-time {
    position: absolute;
    right: 20px;
    top: 20px;
  }
}

/** 店铺名称 */
.shop-name {
  margin: 15px 0;

  span {
    color: #438cde;
    cursor: pointer;

    &:hover {
      color: $theme_color;
    }
  }

  .ivu-icon {
    color: #ff8f23;
    cursor: pointer;

    &:hover {
      color: $theme_color;
    }
  }
}

/** 商品列表 */
table {
  border: 1px solid #ddd;
  color: #999;
  border-collapse: collapse;
  width: 100%;

  tr {
    border-top: 1px solid #ddd;
  }

  thead > tr {
    height: 40px;
    background: #eee;
  }

  td {
    padding: 5px;
    text-align: center;

    &:first-child {
      text-align: left;
      display: flex;

      img {
        width: 70px;
        height: 70px;
        margin-right: 10px;
        margin-left: 10px;
        cursor: pointer;
      }
    }

    &:last-child {
      color: $theme_color;
    }
  }
}

/** 订单价格 */
.order-price {
  text-align: right;
  margin-top: 30px;
  font-size: 16px;
  color: #999;

  > div > span:nth-child(2) {
    width: 130px;
    text-align: right;
    display: inline-block;
    margin-top: 10px;
  }

  .actrual-price {
    color: $theme_color;
    font-weight: bold;
    font-size: 20px;
  }
}

.verificationCode {
  font-size: 20px;
  margin-bottom: 20px;
  color: rgb(65, 63, 63);
  font-weight: bold;
  text-align: center;

  span {
    color: $theme_color;
  }
}

/** 订单进度条 */
.progress {
  margin: 15px 0;
}
</style>
